<!-- 图表页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>应用服务单元管理</title>
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../../../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/lib/rapid/css/rapid.ui.layout.min.css">
    <link rel="stylesheet" href="/lib/rapid/css/rapid.ui.theme.1.min.css">
    <link rel="stylesheet" href="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../../../../content/pc/sysmgt/blockchainManagement/blockchainManagement.css"/>
    <style>
        .right-container{
            background-image: url(../../../../../lib/ui/img/background-image.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .title-h{
            /* padding: 10px 8%; */
            margin-left: 8%;
            margin-right: 8%;
        }
        .main-container{
            padding: 20px 8%;
            height: calc(100% - 60px);
        }
        .right-container .inform-p .colorBlue{
            color: #2a86ff!important;
        }
        .four-container>div{
            text-align: center;
        }
        .inform-p .btn{
            float:right;
            width: 150px;
        }
        .tab-container{
            background-color: #fff;
            -webkit-box-shadow: 0 2px 4px 0 rgba(54,58,80,.32);
            box-shadow: 0 2px 4px 0 rgba(54,58,80,.32);
            margin-left: auto;
            margin-right: auto;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 0;
            color: rgba(0,0,0,.9);
            margin-top: 20px;
            padding: 10px 20px;
            height: calc(100% - 140px);
        }
        .tab-content{
            width:100%;
            height: calc(100% - 35px);
            overflow:auto;
        }
        .tab-content>div{
        }
        .information-container{
            margin-top: 0;
            -webkit-box-shadow:unset; 
            box-shadow:unset;
        }
        .ideTable{
            border-collapse: collapse;
            border-spacing: 0;
            position: relative;
            table-layout: fixed;
            width: 45%;
            /* margin-left:10%; */
            text-indent: initial;
            /* border: 1px solid #cfd5de; */
            border-radius: 0;
        }
        .ideTable td:first-child{
            font-size: 15px;
            color: #000;
            font-weight: 700;
        }
        .ideTable-tr th{
            font-size: 16px;
            color: #337ab7!important;
            font-weight: 700;
        }
        .ideTable tr th{
            border-bottom: 1px solid #cfd5de;
        }
        .ideTable tr th,.ideTable tr td{
            padding: 4px 16px;
            height: 51px;
            color: rgba(0,0,0,.4);
            vertical-align: middle!important;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .ideTable thead{
            /* background-color: #e2efff; */
        }
        .ideTable tbody{
            background-color: #fff;
        }
        .margin-top20{
            margin-top:20px;
        }
        td span{
            color:#006eff;
            color: #006eff;
            cursor: pointer;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            border:1px solid transparent;
        }
        .margin-right10{
            margin-right:10px;
        }
        .marginRight-32 .green-circle {
            background: #75b936;
            border-radius: 10px;
            border-color: #75b936;
            color: #fff;
            font-size: 12px;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            max-width: 100%;
            padding: 0 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            top: 7px;
            left: 5px;
        }
        .navbar-coanter{
            height: 56px;
            /* width: 100%; */
            color: #14125e;
            background: hsla(0,0%,100%,.5);
            font-size: 25px;
            font-weight: bold;
            padding: 10px;
            margin-left:8%;
            margin-right:8%;
        }
        .glyphicon-menu-left{
            top:4px;
        }
        .tab-li{
            font-size:18px;
            font-weight: 700;
        }
        .font-18{
            font-size:18px;
            /* font-weight: 700; */
        }
        .font-16{
            font-size:16px;
        }
        .nav>li>a{
            color:#555;
        }
        .indicators-container{
            height:unset;
        }
        .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
            color: #2a86ff;
        }
        .cursor{
            cursor: pointer;
        }
        .left{
            float: left;
        }
        .right{
            float:right;
        }
        .vertical-div{
            float: left;
            border: 1px solid #e7eaef;
            height: 220px;
            margin-left:1%;
            margin-top: 1%;
        }
        .ideTable-tr{
            width: 45%;
            text-align: center;
        }
        .four-container .font-16{
            margin-top: 10px;
        }
        .ellipsis{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .left-tab-container,.right-tab-container{
            width: 50%;
            height: 250px;
            padding:20px;
        }
        .left-tab-container{
            border-right: 1px solid #e7eaef;
            
        }
        .left-tab-container>p,.right-tab-container>p{
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .left-tab-container>p>span:first-child,.right-tab-container>p>span:first-child{
            font-size: 15px;
            color: #000;
            font-weight: 700;
        }
        .right-tab-container{

        }
        .btnstyleSpan{
            font-size: 14px;
            color: #2a86ff;
        }
        .margin-right60{
            margin-right:60px;
        }
        .marginRight-32{
            margin-right: 32%;
        }
        .title-tab-p{
            height: 50px;
            line-height:50px;
            font-size: 16px;
            color: #337ab7!important;
            font-weight: 700;
        }
        .service-management{
            height: 40px;
            line-height: 40px;
            /* display:flex; */
            /* border:1px solid red; */
        }
        .service-management .marginRight-32{
            width: 250px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 0;
        }
        .service-management>div{
            /* border: 1px solid blue; */
            width: 130px;
            float: right;
        }
        .btn-container{
            width:100%;
            height:50px;
            padding: 10px;
        }
    </style>
</head>
<body class="layui-view-body outside-container">
  <div class="second-container">
    <!-- 左侧菜单栏 -->
    <!-- <div class="left-container">
        <p class="min-title-p">区块链管理</p>
        <ul class="menu-ul">
            <li class="li-active">区块链概览</li>
            <li>合约管理</li>
            <li>上链管理</li>
            <li>投票管理</li>
            <li>组织信息</li>
            <li>节点信息</li>
            <li>区块链浏览器</li>
        </ul>
    </div> -->
    <!-- 右侧主信息 -->
    <div class="right-container">
        <p class="navbar-coanter">
            <span class="glyphicon glyphicon-menu-left cursor" onclick="window.history.back()"></span>
            <span>#(record.get("attrib_03"))-运行管理</span>
        </p>
        <div class="main-container">
            <div class="indicators-container">
                <p class="font-18"></p>
                <div class="four-container">
                    <div>
                        <p class="font-16">上链指令数据</p>
                        #if(record.get("orderSize")!=null)
                        <p class="font-36 ellipsis">#(record.get("orderSize"))</p>
                        #else
                        <p class="font-36 ellipsis">0</p>
                        #end
                    </div>
                    <div>
                        <p class="font-16">上链状态数据</p>
                        #if(record.get("stateSize")!=null)
                        <p class="font-36 ellipsis">#(record.get("stateSize"))</p>
                        #else
                        <p class="font-36 ellipsis">0</p>
                        #end
                    </div>
                    <div>
                        <p class="font-16">上链存证数据</p>
                        #if(record.get("evidenceSize")!=null)
                        <p class="font-36 ellipsis">#(record.get("evidenceSize"))</p>
                        #else
                        <p class="font-36 ellipsis">0</p>
                        #end
                    </div>
                    <!-- <div>
                        <p class="font-12">链上组织数</p>
                        <p>
                            <span class="font-36">4</span>
                            <span>个</span>
                        </p>
                    </div> -->
                </div>
            </div>
            <!-- Tab页应用服务单元管理  应用服务单元配置 -->
           <div class="tab-container">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active font-18"><a href="#unitManagement" aria-controls="profile" role="tab" data-toggle="tab">应用服务基础信息管理</a></li>
                    <li role="presentation" class="font-18"><a href="#unitConfiguration" aria-controls="messages" role="tab" data-toggle="tab">应用服务单元配置</a></li>
                </ul>
                <div class="tab-content">
                    <!-- 应用服务单元管理 -->
                    <div role="tabpanel" class="tab-pane active" id="unitManagement">
                        <div class="information-container">
                            <div>
                                <div class="btns-container">
                                    <button type="button" class="btn btn-primary btnColor" value="#(record.get('conflict_id'))" onclick="uploadToRemoteClick(this)">部署</button>
                                    <button type="button" class="btn btn-primary btnColor" value="#(record.get('conflict_id'))" onclick="updateRemoteAppClick(this)" >更新</button>
                                    <button type="button" class="btn btn-primary btnColor" value="#(record.get('conflict_id'))" onclick="startRemoteAppClick(this)"  data-value="#(record.get('attrib_10'))">#(record.get("attrib_10")=='正常'?'停止':'启动')</button>
                                    <!-- <button type="button" class="btn btn-primary btnColor" value="#(record.get('conflict_id'))" onclick="stopRemoteAppClick(this)" >停止</button> -->
                                </div>
                            </div>
                            #if(record!=null)
                            <p class="inform-p">
                                <span>应用描述</span>
                                <span>
                                     #(record.get("attrib_04"))
                                    <!-- <i class="tea-icon tea-icon-copy" role="img" aria-label="copy" style="cursor: pointer;" id="copy-icon" title="复制"></i> -->
                                </span>
                                <!-- <button type="button" class="btn btn-primary btnColor">文件存证路径设置</button> -->
                            </p>
                            <p class="inform-p">
                                <span>开发单位</span>
                                <span>#(record.get("attrib_05"))</span>
                                <!-- <button type="button" class="btn btn-primary btnColor">指令存证路径设置</button> -->
                            </p>
                            <p class="inform-p">
                                <span>所属站点</span>
                                <span>#(record.get("attrib_37"))</span>
                                <!-- <button type="button" class="btn btn-primary btnColor">状态存证路径设置</button> -->
                            </p>
                            <p class="inform-p">
                                <span>联系方式</span>
                                <span>#(record.get("attrib_06"))</span>
                                <!-- <button type="button" class="btn btn-primary btnColor">控制数据任务启动/停止</button> -->
                            </p>
                            <p class="inform-p">
                                <span>执行文件</span>
                                <span class="colorBlue">预览下载</span>
                                <!-- <button type="button" class="btn btn-primary btnColor">控制文件任务启动/停止</button> -->
                            </p>
                            <p class="inform-p">
                                <span>文件名</span>
                                <span>#(record.get("attrib_34"))</span>
                            </p>
                            <p class="inform-p">
                                <span>接口标识符</span>
                                <span>#(record.get("attrib_35"))</span>
                            </p>
                            <p class="inform-p">
                                <span>登录信息</span>
                                <span>#(record.get("attrib_36"))</span>
                            </p>
                            <p class="inform-p">
                                <span>应用所在路径</span>
                                <span>#(record.get("attrib_09"))</span>
                            </p>
                            <p class="inform-p">
                                <span>应用启动命令</span>
                                <span>#(record.get("attrib_12"))</span>
                                <!-- <button style="color: #fff;border: none;padding: 5px 5px;border-radius: 5px;background: #12b886;float: right" onclick="window.history.back()">返回</button> -->
                            </p>
                            #end
                        </div>
                    </div>
                    <!-- 应用服务单元配置 -->
                    <div role="tabpanel" class="tab-pane" id="unitConfiguration">
                        <!-- 按钮 -->
                        <div class="btn-container">
                            <button type="button" class="btn btn-primary right" onclick="addNewFun(this)" data-value="#(record.get('attrib_03'))">新增</button>
                        </div>
                        #if(configList!=null)
                            <div class="left-tab-container left">
                                <p class="title-tab-p">上链服务管理</p>
                                #for(x:configList)
                                    #if(configList!=null && !x.get("attrib_03").contains("启动与停止"))
                                        <div class="service-management">
                                            <span class="marginRight-32 left">#(x.get("attrib_03"))</span>
                                            <div>
                                                #if(configList!=null && x.get("attrib_03").contains("启动与停止"))
                                                    <span  value="#(x.get('conflict_id'))" onclick="executeFun(this)" class="margin-right10 btnstyleSpan right">切换状态</span>
                                                #end
                                                #if(configList!=null && !x.get("attrib_03").contains("启动与停止"))
                                                    <span  value="#(x.get('conflict_id'))" onclick="mocExecClick(this)" class="margin-right10 btnstyleSpan right">执行操作</span>
                                                #end
                                                <span  value="#(x.get('conflict_id'))" onclick="executeFun(this)" class="margin-right10 btnstyleSpan right">详情</span>
                                            </div>
                                        </div>
                                    #end
                                #end
                            </div>
                        #end
                        #if(configList!=null)
                            <div class="right-tab-container right">
                                <p class="title-tab-p">参数配置</p>
                                #for(x:configList)
                                    #if(configList!=null && x.get("attrib_03").contains("启动与停止"))
                                        <div class="service-management">
                                            <span class="left marginRight-32">#(x.get("attrib_03"))<i class="green-circle">#(x.get("attrib_07"))</i></span>
                                            <div>
                                                #if(configList!=null && x.get("attrib_03").contains("启动与停止"))
                                                    <span  value="#(x.get('conflict_id'))" onclick="mocSwitchStateClick(this)" class="margin-right10 btnstyleSpan right">切换状态</span>
                                                #end
                                                #if(configList!=null && !x.get("attrib_03").contains("启动与停止"))
                                                    <span  value="#(x.get('conflict_id'))" onclick="mocExecClick(this)" class="margin-right10 btnstyleSpan right">执行操作</span>
                                                #end
                                                    <span  value="#(x.get('conflict_id'))" onclick="executeFun(this)" class="margin-right10 btnstyleSpan right">详情</span>
                                            </div>
                                        </div>
                                    #end
                                #end
                            </div>
                        #end
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
<script src="../../../../../lib/jquery/jquery.min.js"></script>
<script src="../../../../../lib/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../../../lib/ui/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../../../../lib/echarts4.4/echarts.min.js"></script>
<script src="/lib/rapid/script/rapid.ui.min.js"></script>
<script>
    //卡片点击事件
    $('.card-div').on('click',function(e){
        console.log( $(e.currentTarget).attr('title'));//绑定数据
    });

    //启动方法调用
    function startRemoteAppClick(data){//'type'
        let cid=$(data).attr('value');
        let thisType=$(data).attr('data-value');//正常和停止
        if(thisType=='停止'){
            rapid.confirm("确定要启动吗？", function(e) {
                if(e){
                    rapid.success("已操作",function(){
                        rapid.post({
                            url: "/sysadmin/remoteApp/startRemoteApp",
                            data: {"cid": cid},
                            success: function (result) {
                            // rapid.success(result.msg);
                                //刷新页面
                                location.reload();
                            }
                        });
                    });
                }
            });
        }else if(thisType=='正常'){//原先是启动
            let cid=$(data).attr('value');
            rapid.confirm("确定要停止吗？", function(e) {
                if(e){
                    rapid.success("已操作",function(){
                        rapid.post({
                            url: "/sysadmin/remoteApp/stopRemoteApp",
                            data: {"cid": cid},
                            success: function (result) {
                            // rapid.success(result.msg);
                                //刷新页面
                                location.reload();
                            }
                        });
                    });
                }
            });
        }
        console.log( cid);//绑定数据
        
    }

    //停止方法调用
    function stopRemoteAppClick(data){
        let cid=$(data).attr('value');
        rapid.confirm("确定要停止吗？", function(e) {
            if(e){
                rapid.post({
                    url: "/sysadmin/remoteApp/stopRemoteApp",
                    data: {"cid": cid},
                    success: function (result) {
                        rapid.success(result.msg);
                    }
                });
            }
        });
    }

    //部署方法调用
    function uploadToRemoteClick(data){
        let cid=$(data).attr('value');
        rapid.confirm("确定要部署吗？", function(e) {
            if(e){
                rapid.post({
                    url: "/sysadmin/remoteApp/uploadToRemote",
                    data: {"cid": cid},
                    success: function (result) {
                        rapid.success(result.msg);
                    }
                });
            }
        });
    }
    //远程更新方法调用
    function updateRemoteAppClick(data){
        let cid=$(data).attr('value');
        rapid.confirm("确定要更新吗？", function(e) {
            if(e){
                rapid.post({
                    url: "/sysadmin/remoteApp/updateRemoteApp",
                    data: {"cid": cid},
                    success: function (result) {
                        rapid.success(result.msg);
                    }
                });
            }
        });
    }

    //服务与配置变更管理 操作执行
    function mocExecClick(data){
        let cid=$(data).attr('value');
        rapid.confirm("确定要执行吗？", function(e) {
            if(e){
                rapid.post({
                    url: "/sysadmin/remoteApp/mocExec",
                    data: {"cid": cid},
                    success: function (result) {
                        //用comfirm打印返回内容，需要用户确认
                        rapid.confirm(JSON.stringify(result,null, 2), function(e) {});
                    }
                });
            }
        });
    }
    //服务与配置变更管理 切换转态
    function mocSwitchStateClick(data){
        let cid=$(data).attr('value');
        rapid.confirm("确定要切换吗？", function(e) {
            if(e){
                rapid.post({
                    url: "/sysadmin/remoteApp/mocSwitchState",
                    data: {"cid": cid},
                    success: function (result) {
                        //用comfirm打印返回内容，需要用户确认
                        rapid.confirm(JSON.stringify(result,null, 2), function(e) {
                            //刷新页面
                            location.reload();
                        });
                    }
                });
            }
        });
    }
    //新增按钮
    function addNewFun(e){

    }
    $(document).ready(function() {
        //

    }) 
</script>
</body>
</html>